<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Pear Admin 官网</title>
    <link rel="stylesheet" href="assets/layui/css/layui.css"/>
    <link rel="stylesheet" href="assets/css/main.css"/>
</head>
<body class="page-no-scroll">
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- header -->
<div class="ew-header">
    <a class="layui-logo" href="index.html">Pear Admin 官网</a>
    <div class="ew-nav-group">
        <div class="nav-toggle"><i class="layui-icon layui-icon-more-vertical"></i></div>
        <ul class="layui-nav" lay-filter="ew-header-nav">
            <li class="layui-nav-item">
                <a lay-href="index.html">首页</a>
            </li>
            <li class="layui-nav-item">
                <a lay-href="index.html#pricing">授权</a>
            </li>
            <li class="layui-nav-item">
                <a lay-href="index.html#guide">指南</a>
            </li>
            <li class="layui-nav-item">
                <a lay-href="index.html#product">产品</a>
            </li>
            <li class="layui-nav-item">
                <a href="doc/" target="_blank">文档</a>
            </li>
            <li class="layui-nav-item no-padding-right">
                <a href="javascript:;">演示<i class="layui-hide-xs">&emsp;</i></a>
                <dl class="layui-nav-child">
                    <dd><a href="https://demo.easyweb.vip/iframe/" target="_blank">iframe版</a></dd>
                    <dd><a href="https://demo.easyweb.vip/spa/" target="_blank">spa单页面版</a></dd>
                    <dd><a href="https://demo.easyweb.vip/pro/" target="_blank">单标签版</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item no-padding-right">
                <a href="javascript:;">管理员<i class="layui-hide-xs">&emsp;</i></a>
                <dl class="layui-nav-child text-center">
                    <dd><a href="info.html">个人中心</a></dd>
                    <dd><a href="order.html">我的订单</a></dd>
                    <dd lay-unselect><a ew-event="psw" data-url="password.html">修改密码</a></dd>
                    <dd lay-unselect><a ew-event="logout" data-url="login.html">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>

<!-- goods-card -->
<div class="layui-container body-card">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span class="layui-breadcrumb">
                        <a href="index.html">首页</a>
                        <a href="index.html#product">全部产品</a>
                        <a><cite>产品详情</cite></a>
                    </span>
                </div>
                <div class="layui-card-body goods-desc-card">

                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">选择规格</div>
                <div class="layui-card-body goods-card">
                    <div class="goods-cover"
                         style="background-image: url('assets/images/item-1.jpg');">
                    </div>
                    <h1 class="goods-title">静谧风格个人博客模板</h1>
                    <p class="goods-desc">隔离尘世的喧嚣，不必再寻觅，这款博客模板，正是为你而作</p>
                    <div class="goods-btn-group">
						<a href="buy.html" class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-primary">
						    <i class="layui-icon">&#xe657;</i>源码下载
						</a>
                        <a href="buy.html" class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-warm">
                            <i class="layui-icon">&#xe657;</i>开发文档
                        </a>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">在线客服</div>
                <div class="layui-card-body text-center">
                    <img src="assets/images/img_qr_qq.png" width="100%" style="max-width: 220px;"/>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- footer -->
<div class="ew-footer">
    <div class="layui-container">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-md6">
                <h3 class="footer-item-title">技术交流群</h3>
                <p class="img-group">
                    <img src="assets/images/img_qqgroup.png"/>
                    扫码免费加入前后端分离技术交流QQ群，与各位大佬一起交流技术、讨论问题。
                </p>
            </div>
            <div class="layui-col-md4">
                <h3 class="footer-item-title">联系我们</h3>
                <p>
                    <i class="layui-icon layui-icon-login-qq"></i>
                    <a href="http://wpa.qq.com/msgrd?v=3&uin=1543859471&site=qq&menu=yes" target="_blank"
                       title="点击发起聊天">QQ: 1543859471</a>
                </p>
                <p>
                    <i class="layui-icon layui-icon-dialogue"></i>
                    <a href="mailto:whvcse@foxmail.com" title="点击发送邮件">邮箱: whvcse@foxmail.com</a>
                </p>
                <p>
                    <i class="layui-icon layui-icon-website"></i>
                    <a href="https://easyweb.vip">网址: www.easyweb.vip</a>
                </p>
            </div>
            <div class="layui-col-md2">
                <h3 class="footer-item-title">快速通道</h3>
                <p><a href="https://demo.easyweb.vip/theme/" target="_blank">主题生成器</a></p>
                <p><a href="https://www.layui.com/doc/" target="_blank">Layui开发文档</a></p>
                <p><a href="https://fly.layui.com/extend/" target="_blank">Layui扩展组件</a></p>
                <p><a href="https://fly.layui.com/" target="_blank">Layui交流社区</a></p>
            </div>
        </div>
        <div class="footer-copyright">
            <p>Copyright © 2019 www.easyweb.vip. All rights reserved.</p>
            <p>鄂ICP备18024391号</p>
        </div>
    </div>
</div>

<!-- js部分 -->
<script type="text/javascript" src="assets/layui/layui.js"></script>
<script type="text/javascript" src="assets/js/common.js"></script>
<script>
    layui.use(['jquery'], function () {
        var $ = layui.jquery;
        var goodsPriceList = JSON.parse('[{"createTime":1568863746000,"goodsPriceId":1,"goodsSpecId":1,"price":49.9,"updateTime":1568864190000,"validityId":1},{"createTime":1568863750000,"goodsPriceId":2,"goodsSpecId":1,"price":89.9, "originalPrice":299.9, "discountDesc": "双十一狂欢价，截止日期：11-11 23:59","updateTime":1570503880000,"validityId":2},{"createTime":1568863752000,"goodsPriceId":3,"goodsSpecId":1,"price":149.9,"updateTime":1568864246000,"validityId":3},{"createTime":1568863754000,"goodsPriceId":4,"goodsSpecId":2,"price":99.9, "originalPrice":299.9, "discountDesc": "双十一狂欢价，截止日期：11-11 23:59","updateTime":1568865026000,"validityId":1},{"createTime":1568863756000,"goodsPriceId":5,"goodsSpecId":2,"price":159.9, "originalPrice":299.9, "discountDesc": "双十一狂欢价，截止日期：11-11 23:59","updateTime":1570503898000,"validityId":2},{"createTime":1568863758000,"goodsPriceId":6,"goodsSpecId":2,"price":249.9, "originalPrice":299.9, "discountDesc": "双十一狂欢价，截止日期：11-11 23:59", "updateTime":1570503905000,"validityId":3}]');

        // 商品规格点击事件
        $('#goods-buy-spec>div').click(function () {
            $('#goods-buy-spec>div').removeClass('active');
            $(this).addClass('active');
            showPrice();
        });

        // 授权时长点击事件
        $('#goods-buy-valid>div').click(function () {
            $('#goods-buy-valid>div').removeClass('active');
            $(this).addClass('active');
            showPrice();
        });

        // 规格默认选中第一个
        $('#goods-buy-spec>div:eq(0)').trigger('click');
        $('#goods-buy-valid>div:eq(0)').trigger('click');

        // 立即购买
        $('#btnBuy').click(function () {
            var goodsId = $('#goodsId').val();
            var specId = $('#goods-buy-spec>div.active').data('id');
            var validityId = $('#goods-buy-valid>div.active').data('id');
            location.href = '/goods/buy/' + goodsId + '/' + specId + '/' + validityId;
        });

        // 显示价格
        function showPrice() {
            $('#goods-buy-price').html('');
            var $spec = $('#goods-buy-spec>div.active');
            var $valid = $('#goods-buy-valid>div.active');
            if ($spec.length == 0 || $valid.length == 0) {
                return;
            }
            var specId = $spec.data('id');
            var validId = $valid.data('id');
            for (var i = 0; i < goodsPriceList.length; i++) {
                var goodsPrice = goodsPriceList[i];
                if (goodsPrice.goodsSpecId == specId && goodsPrice.validityId == validId) {
                    var priceHtml = '<div class="goods-price-label">商品价格：</div>';
                    priceHtml += '   <div class="goods-price-text">';
                    priceHtml += '      <span class="small">￥</span>' + goodsPrice.price;
                    if (goodsPrice.originalPrice) {
                        priceHtml += '   <span class="goods-price-org">￥' + goodsPrice.originalPrice + '</span>';
                    }
                    priceHtml += '   </div>';
                    if (goodsPrice.originalPrice) {
                        priceHtml += '<div class="goods-price-desc">' + goodsPrice.discountDesc + '</div>';
                    }
                    $('#goods-buy-price').html(priceHtml);
                    return;
                }
            }
        }

        // 商品介绍富文本
        var htmlDesc = '<div style="text-align: center;margin: 15px 0 25px 0;"><span style="padding: 10px 15px;border-top: 2px solid #3EC483;border-bottom: 2px solid #3EC483;display: inline-block;font-size: 16px;color: #555;">        规格说明</span></div><div style=""><table class="layui-table" lay-size="lg"><colgroup><col width="120px"/><col/></colgroup><tr><th style="background-color: #F4F7F7;color: #333;text-align: right;">混淆版：</th><td>                授权后下载的代码里面的核心js文件是经过压缩混淆过的，不便于二次开发，js压缩混淆可以提升浏览器加载速度。</td></tr><tr><th style="background-color: #F4F7F7;color: #333;text-align: right;">源码版：</th><td>                授权后会提供源代码，源代码没有进行过压缩混淆，并且带有详细的注释，便于您进行二次开发。</td></tr></table></div><div style="font-size: 15px;line-height: 30px;padding: 5px;"><p>授权时长说明：</p><p>&emsp;&emsp;在授权有效期内您可以不限次下载代码，版本更新后可以免费升级新版本，可以查看授权版本的开发文档，可以加入技术服务群享受售后服务及技术支持，        授权过期后，不再提供下载功能，不能查看开发文档，不再提供售后服务及技术支持，但是您可以继续使用之前版本的框架开发项目，        授权过期后您也可以再次授权延长授权期。</p></div><div style="padding: 15px 20px;background-color: #F4F7F7;border-left: 4px solid #3EC483;margin-top: 20px;font-size: 14px;color: #333;">        在线演示地址：<a href="https://demo.easyweb.vip/pro/" style="color:#3EC483;" target="_blank">https://demo.easyweb.vip/pro/</a></div><div style="text-align: center;margin: 15px 0 35px 0;"><span style="padding: 10px 15px;border-top: 2px solid #3EC483;border-bottom: 2px solid #3EC483;display: inline-block;font-size: 16px;color: #555;">        项目截图</span></div><img src="https://s2.ax1x.com/2019/09/27/uuTSMt.png"     style="max-width: 100%;margin-bottom: 15px;"><img src="https://s2.ax1x.com/2019/09/27/uuT9qf.png"     style="max-width: 100%;margin-bottom: 15px;"><img src="https://s2.ax1x.com/2019/09/27/uuTidS.png"     style="max-width: 100%;margin-bottom: 15px;">';
        $('.goods-desc-card').html(htmlDesc);
    });
</script>
</body>
</html>